דלג לתוכן הראשי

שינוי רצף התצוגה - Directives

תנאים ולולאות משפיעים על הדרך שבה אנחנו רואים את התוכן בתבנית.

על מנת להשפיע על מבנה הדף נשתמש ב-directives.

ngIf​

מציגים את האלמנט רק אם התנאי נכון.

component html file
<h2 *ngIf="true">Some heading</h2>

אפשר להשתמש בערכים של משתנים על מנת להעריך את התנאי:

component html file
<h2 *ngIf="propName">Some heading</h2>

אפשר להשתמש באפשרות של else כדי לתת תבנית אלטרנטיבית במקרה שהתנאי לא מתקיים:

component html file
<h2 *ngIf="displayName; else elseBlock">Some heading</h2>
<ng-template #elseBlock>
  <h2>Alternative heading</h2>
</ng-template>

אפשר להשתמש בטמפלטים לכל מצב של התנאי:

component html file
<div *ngIf="displayName; then thenBlock; else elseBlock"></div>
<ng-template #thenBlock>
  <h2>First heading</h2>
</ng-template>
<ng-template #elseBlock>
  <h2>Alternative heading</h2>
</ng-template>

ngSwitch​

שימוש בסדרה של תנאים

component html file
<div [ngSwitch]="color">
  <div *ngSwitchCase="'red'">Picked red</div>
  <div *ngSwitchCase="'green'">Picked green</div>
  ...
  <div *ngSwitchDefault>Pick again</div>
</div>
component ts file
public color = 'red';

ngFor​

יצירת רשימה של אלמנטים

component ts file
public colors = ['red', 'green', 'blue'];
component html file
<div *ngFor="let color of colors">
  <h2>{{ color }}</h2>
</div>

יש משתנים נוספים שאפשר להשתמש בהם בתוך לולאת ה-for:

component html file
<div *ngFor="let color of colors; index as i"> ... </div>
<div *ngFor="let color of colors; first as f">first return true if the element is the first</div>
<div *ngFor="let color of colors; last as l"> ... </div>
<div *ngFor="let color of colors; odd as o"> ... </div>
<div *ngFor="let color of colors; even as e"> ... </div>

Template reference variable​

אפשר ליצור משתנה שיחזיק בתוכו אלמנט html

component html file
<input type="text" #myVariable>

שם המשתנה myVariable מחזיק את האלמנט ב-DOM. אם רוצים להשתמש בערך של המשתנה, אפשר להתייחס אליו במסמך.

component html file
<p>{{ myVariable.value }}</p>

בעיה לפעמים העמוד עולה לפני שיש ערך בתוך המשתנה, ואז אנחנו צריכים להגיד ל-DOM שהיה שינוי במשתנה. אפשר להשתמש באירוע keyup כדי לעשות את זה.

component html file
<input type="text" #myVariable (keyup)="0"/>

את המשתנה שנוצר אפשר לקרוא ב-class.

component html file
<input type="text" #myVariable>
<button (click)="sayHello(myVariable)"></button>
component ts file
sayHello(inputEl: HTMLInputElement) {
    console.log('Hello ' + inputEl.value);
}